﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hiFGULKPw2WBszF0CDj9z7HdQlMGoDFZ"></script>
<script src="../lib/jquery.min.js"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:100%;height:670px;border:#ccc solid 0px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent", { minZoom: 9, maxZoom: 18 });//在百度地图容器中创建一个地图
        var point = new BMap.Point(111.592827, 30.897726);//定义一个中心点坐标
        map.centerAndZoom(point,9);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        map.setMapStyle({ style: 'grayscale' });
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    
    initMap();//创建和初始化地图

    getBoundary();//创建规划线

    function getBoundary(){       
        var bdary = new BMap.Boundary();
        bdary.get("宜昌市", function(rs){       //获取行政区域
            //map.clearOverlays();        //清除地图覆盖物       
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 4, strokeColor: "blue", fillColor: "none" }); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
                
            }    
            //map.setViewport(pointArray);    //调整视野               
        });   
    }
    var mnType = {
    "PP": "雨量站",
    "ZZ": "水位站",
    "ZQ": "水文站",
    "RR": "水库",
    "SS": "墒情站",
    "ZG": "地下水站"
    };
    var imgType = {
    "PP": "../static/h-ui.admin/images/map_yuliang.png",
    "ZZ": "../static/h-ui.admin/images/map_shuiwei.png",
    "ZQ": "../static/h-ui.admin/images/map_shuiwen.png",
    "RR": "../static/h-ui.admin/images/map_shuiku.png",
    "SS": "../static/h-ui.admin/images/map_shangqing.png",
    "ZG": "../static/h-ui.admin/images/map_dixiashui.png"
    };
  

    //调用增加点数据方法

    
     //addMarker(points, 60, 60);
     map.addEventListener("zoomend", function () {
                var DiTu = this.getZoom();
                if (DiTu < 11) { $('.ditu_bj').parent().parent().hide(); $('.quxian_span').parent().show(); $(".BMap_Marker ").hide(); } else {
                    if ($(".ditu_bj").length > 0) {
                        $('.ditu_bj').parent().parent().show();
                        $('.quxian_span').parent().hide();
                        $(".BMap_Marker ").show()
                    }else {
                        $.get("../../Home/GetAllSite", "", function (data) {
                            data = JSON.parse(data);
                            addMarker(data, 60, 60);
                        }, "json")
                        $('.quxian_span').parent().hide();
                        $(".BMap_Marker ").show()
                    }
                }           
            });
    

    //增加点数据方法
    function addMarker(markerArr1, width, height) {
            for (var i = 0; i < markerArr1.length; i++) {
                var json = markerArr1[i];
                var p0 = json.LGTD;
                var p1 = json.LTTD;
                //查询每个站点的雨量值
                var rainvalue = json.SUMVAL;
                var point = new BMap.Point(p0, p1);
                var icon = { h: height, l: 0, lb: 9, t: 1, w: width, x: 6 };
                var iconImg = imgType[json.STTP];
                var myIcon2 = new BMap.Icon(iconImg, new BMap.Size(16,15));
                var marker = new BMap.Marker(point, { icon: myIcon2 });

                var iw = createInfoWindow(markerArr1, i);
                var label;
                if (rainvalue > 0) {
                    label = new BMap.Label("<div class='ditu_bj' style='color:red'>" + json.STNM + ":" + rainvalue.toFixed(1) + "mm</div>", { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) });
                } else {
                    label = new BMap.Label("<div class='ditu_bj' style='color:#2A96FF'>" + json.STNM + "</div>", { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) });
                }
                
                marker.setLabel(label);
                map.addOverlay(marker);
                label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer"});

                (function () {
                    var index = i; var _iw = createInfoWindow(markerArr1, i);
                    var _marker = marker;
                    _marker.addEventListener("click", function (img) {

                        this.openInfoWindow(_iw);
                    });
                    _iw.addEventListener("open", function () {
                        _marker.getLabel().hide();
                    });
                    _iw.addEventListener("close", function () { _marker.getLabel().show(); });
                    label.addEventListener("click", function () { _marker.openInfoWindow(_iw); });
                    if (!!json.isOpen) {
                        label.hide();
                        _marker.openInfoWindow(_iw);
                    }
                })()
            }
    }
    var _yl = "";
    function jryl(data) {
        data = JSON.parse(data);
        _yl = data;
    }

    
    //增加点数据信息窗口
    function createInfoWindow(markerArr1, i) {

            var json = markerArr1[i];
            var data = json.monitoring_point_mn; //加载点的信息
            var tr = "";
            var sj = "";
            for (k = 0; k < _yl.length; k++) {
                var kk = _yl[k].STNM;

                var kk2 = _yl[k].SUMVAL;
                if (json.STNM == kk) { tr = kk2 }
            }
            //$(data).each(function (index, row) {

                //tr += "<tr><td>" + row.factor_name + "</td><td>" + row.datatime + "</td><td>" + row.avgvalue + "</td></tr>";
                //tr += row.factor_name + ":" + row.avgvalue + "<br />";
                
            //});
            var opts = {
                width: 500,     // 信息窗口宽度
                height: 200,     // 信息窗口高度
                title: "", // 信息窗口标题
                enableMessage: true,//设置允许信息窗发送短息
                message: ''
            }
            var detail = "站 点 名："+json.STNM +
                 "<br>"  + "站点类型：" +mnType[json.STTP] +
                "<br/>" +  "地&nbsp&nbsp址：" +json.STLC;
            var imgDom = "<div style='float:left;font-size: 17px;margin-left: 20px;width:400px;line-height:24px;'>" + detail + "</div>";
            var htmldom = imgDom + "<div style='float:left;font-size: 17px;margin-left: 20px;width:370px;overflow-x: auto;line-height:24px;'><br />今日雨量：" + tr + "mm</div>";
            var iw = new BMap.InfoWindow(htmldom, opts);
            return iw;
    }
    //addlele();
    function addlele(data) {
            data = JSON.parse(data);
            var yd = [{ "l": "111.292656", "r": "30.719056" }, 
            { "l": "111.366246", "r": "30.650482" }, 
            { "l": "111.274712", "r": "30.698996" }, 
            { "l": "111.44115", "r": "30.53689" }, 
            { "l": "111.331916", "r": "30.777216" }, 
            { "l": "111.64467", "r": "31.063721" }, 
            { "l": "110.751251", "r": "31.35429" }, 
            { "l": "110.981218", "r": "30.831808" }, 
            { "l": "111.21327", "r": "30.486663" },
             { "l": "110.681473", "r": "30.222395" }, 
             { "l": "111.453009", "r": "30.388021" }, 
             { "l": "111.792311", "r": "30.830344" }, 
             { "l": "111.764715", "r": "30.431598" }]
            for (var i = 0; i < data.length; i++) {
                var list1 = data[i].ATCUNIT;
                    var list2 = data[i].SUMRAIN / data[i].NUMRAIN;
                    list2 = list2.toFixed(1) + "mm";

                    var p0 = yd[i].l;
                    var p1 = yd[i].r;
                    var point = new BMap.Point(p0, p1);
                //quxian_span
                    var myLabel = new BMap.Label("<span class='quxian_span' >" + list1 + ":" + list2 + "</span>", { offset: new BMap.Size(0, 0), position: point });
                    map.addOverlay(myLabel);
                    myLabel.setStyle({ borderColor: "rgb(128, 128, 128)", color: "#2A96FF", cursor: "pointer" });
                    
            }           
        
    }
    //获取点击站点名 移动到当前站点位子
    function allPoint(b) {
        if ($(".ditu_bj").length > 0) {
            ben_();
        } else {
            $.get("../../Home/GetAllSite", "", function (data) {
                data = JSON.parse(data);
                addMarker(data, 60, 60);
                ben_();
            }, "json")
            $('.quxian_span').parent().hide();
        }
        function ben_() {
            var allOverlay = map.getOverlays();

            for (var i = 0; i < allOverlay.length ; i++) {

                if (allOverlay[i].toString() == "[object Marker]") {
                    var point = allOverlay[i].getPosition(); //获取marker的位置
                    var name = allOverlay[i].getLabel().content;
                    if (name.indexOf(b) > 0) {
                        //alert("marker的名称是"+name);
                        //alert("marker的位置是" + point.lng + "," + point.lat); 
                        var point2 = new BMap.Point(point.lng, point.lat); //定义一个中心点坐标
                        map.centerAndZoom(point2, 15); //设定地图的中心点和坐标并将地图显示在地图容器中
                    }
                }

            }
        }
    }


    function allPoint2(b) {
        var allOverlay = map.getOverlays();

        for (var i = 0; i < allOverlay.length ; i++) {
            allOverlay[i].toString()
            if (allOverlay[i].toString() == "[object Label]") {
                var point = allOverlay[i].getPosition(); //获取marker的位置
                var name = allOverlay[i].content;
                if (name.indexOf(b) > 0) {
                    //alert("marker的名称是"+name);
                    //alert("marker的位置是" + point.lng + "," + point.lat); 
                    var point2 = new BMap.Point(point.lng, point.lat); //定义一个中心点坐标
                    map.centerAndZoom(point2, 10); //设定地图的中心点和坐标并将地图显示在地图容器中
                }
            }

        }

    }

</script>
</html>